<template>
	<view class="u-rela">
		<image class="header-bg" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/img-3.png"
			mode="widthFix"></image>
		<!-- 自定义头部start -->
		<customHeader title="溯源信息"></customHeader>
		<!-- 自定义头部end -->
		<view class="page-wrap">
			<!-- 大图及内容 -->
			<view class="wrap1">
				<image class="wrap1-bg" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/img-4.png"
					mode="widthFix"></image>
				<view class="content">
					<image class="wrap1-img"
						:src="data.image" mode="widthFix">
					</image>
					<view class="u-font-38 u-m-t-20 blod">{{data.name}}</view>
					<view class="u-flex u-m-t-20">
						<text class="text-1 u-m-r-30" v-for="(item,index) in data.label" :key="item">{{item}}</text>
						<!-- <text class="text-1 u-m-l-30">水果</text> -->
						<view class="u-flex text-2" :style="data.status==1 ? '' : 'background:#FA3B30'">
							<image class="icon-dg"
								:src="data.status==1 ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-dg-w.png' : require('../../../static/images/x.png')"
								mode="widthFix"></image>
							<text>{{data.status==1 ? '核验通过' : '未通过'}}</text>
						</view>
					</view>
					<view class="u-p-t-40 u-border-bottom"></view>
					<view class="num-wrap u-flex u-row-around">
						<view class="item">
							<text class="u-font-28">查询次数</text>
							<text class="u-font-36 blod u-m-t-10">{{data.scan_num}}</text>
						</view>
						<view class="line"></view>
						<view class="item">
							<text class="u-font-28">溯源ID</text>
							<text class="u-font-36 blod u-m-t-10">{{data.batch_code}}</text>
						</view>	
					</view>
				</view>
			</view>
			<!-- 产地 -->
			<view class="property-wrap u-flex">
				<image class="icon" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-1.png"
					mode="widthFix"></image>
				<text class="u-font-32 u-m-l-30 u-flex-1 blod">产地</text>
				<text class="u-font-28">{{data.address}}</text>
			</view>
			<!-- 上市时间 -->
			<view class="property-wrap u-flex">
				<image class="icon" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-2.png"
					mode="widthFix"></image>
				<text class="u-font-32 u-m-l-30 u-flex-1 blod">上市时间</text>
				<text class="u-font-28">{{data.listing_date}}</text>
			</view>
			<!-- 商品介绍 -->
			<view class="u-m-t-40 u-m-b-20 u-font-38 blod u-m-l-30">商品介绍</view>
			<view class="detail-wrap" v-html="data.detail">
				
			</view>
			<!-- <image class="img-6" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/img-6.png" mode="widthFix"></image> -->
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar active-color="#07C160" v-model="current" :list="list" :mid-button="false" @change="tabbarChange">
		</u-tabbar>
	</view>
</template>

<script>
	import customHeader from '@/components/customHeader.vue'
	export default {
		components: {
			customHeader
		},
		data() {
			return {
				current: 0,
				list: [{
						iconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-1.png',
						selectedIconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-1a.png',
						text: '产品信息',
						customIcon: false,
						url: '/pages/agricTrace/agricInfo/agricInfo'
					},
					{
						text: '生长环境',
						iconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-2.png',
						selectedIconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-2a.png',
						customIcon: false,
						url: '/pages/agricTrace/growEnv/growEnv'
					},
					{
						text: '生长日记',
						iconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-3.png',
						selectedIconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-3a.png',
						customIcon: false,
						url: '/pages/agricTrace/growDiary/growDiary'
					},
					{
						text: '权威监管',
						iconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-4.png',
						selectedIconPath: 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-4a.png',
						customIcon: false,
						url: '/pages/agricTrace/authority/authority'
					}
				],
				is_first:1,
				data:{},
				code:'',
				latitude:0,
				longitude:0,
				lat:0,
				lon:0
			}
		},
		onLoad(option) {
			if(this.$store.state.code){
				this.code = this.$store.state.code;
				console.log(this.code,'产品信息');
			}
			
			this.trace_getTraceByCode();
			
			let that = this
			uni.getStorage({
				key: 'lat',
				success: function (res) {
					// console.log(res.data);
					that.lat = res.data
				},
				fail:function(err) {
					setTimeout(()=>{
						that.getLocation()
					},1000)
				}
			});
		},
		onPullDownRefresh(){
			
			
			
		},
		methods: {
			tabbarChange(index) {
				// console.log(index)
				uni.navigateTo({
					url: this.list[index].url
				})
			},
			
			// 
			trace_getTraceByCode(){
				uni.showLoading({
					title: '加载中...'
				});
				this.$http_1({
					url:this.api_1.trace_getTraceByCode,
					method: 'get',
					data:{
						code:this.code,
						is_first:this.is_first
					}
				}).then(res => {
					// console.log(res,'101010');
					if(res.code == 1){
						uni.hideLoading();
						this.is_first = 0;
						uni.setStorage({
							key: 'is_first',
							data: this.is_first
						});
						this.data = res.data
					}
				})
			},
			
			// 获取位置信息
			getLocation(){
				uni.showLoading({
				  title: '定位中'
				})
				uni.getLocation({
					type: 'wgs84',
					geocode:true ,
					success: (res) => {
						uni.hideLoading()
						// console.log(res);
						uni.setStorage({
							key: 'lat',
							data: res.latitude
						});
						uni.setStorage({
							key: 'lon',
							data: res.longitude
						});
						this.trace_upLocation(this.code,res.latitude,res.longitude)
					},
					fail: (res) => {
						uni.hideLoading()
						uni.showLoading({
							title: '定位失败'
						});
					},
				})
			},
			
			trace_upLocation(code,latitude,longitude){
				this.$http_1({
					url:this.api_1.trace_upLocation,
					method: 'get',
					data:{
						code,
						latitude,
						longitude
					}
				}).then(res => {
					// console.log(res,'位置信息');
					if(res.code == 1){
						this.latitude = res.data.latitude;
						this.longitude = res.data.longitude;
					}
				})
			},
		},
		onReady() {

		}
	}
</script>

<style scoped lang="scss">
	.header-bg {
		position: relative;
		width: 750rpx;
		height: 670rpx;
		z-index: 1;
	}

	.page-wrap {
		position: relative;
		z-index: 2;
	}

	.wrap1 {
		width: 690rpx;
		height: 773rpx;
		position: relative;
		padding: 30rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		.wrap1-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.content {
			position: relative;
			z-index: 1;
		}

		.wrap1-img {
			width: 630rpx;
			height: 387rpx;
			border: 3rpx solid #F2B384;
			border-radius: 20rpx;
		}

		.text-1 {
			height: 40rpx;
			border: 1px solid #DDDDDD;
			border-radius: 5rpx;
			padding: 0 10rpx;
			line-height: 40rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			color: #999999;
		}

		.icon-dg {
			width: 22rpx;
			height: 22rpx;
			margin-right: 10rpx;
		}

		.text-2 {
			width: 140rpx;
			height: 40rpx;
			background: #07C160;
			border-radius: 5rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
		}

		.num-wrap {
			margin-top: 40rpx;

			.item {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;

			}

			.line {
				width: 1px;
				height: 82rpx;
				background: #DDDDDD;
			}
		}
	}

	.property-wrap {
		width: 690rpx;
		margin: 0 auto;
		height: 130rpx;
		background: #FFFFFF;
		border: 3rpx solid #FADEC1;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 0 30rpx;

		.icon {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.detail-wrap {
		.img-6 {
			width: 100%;
		}
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>
